<template>
  <div class="app-container addPage">
    <el-form :inline="true" class="demo-form-inline header-form" ref="form"
             label-width="120px" :model="queryForm" :rules="rules">
      <el-row>
        <el-col :span="8">
          <el-form-item label="通用名:" prop="name">
            <el-input size="small" v-model=queryForm.name></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="药品分类:" label-width="120px" prop="drugType">
            <template>
              <el-select size="small" v-model="queryForm.drugType" placeholder="请选择" style="width: 92%;">
                <el-option
                  v-for="item in options"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="检索码:" prop="searchKey">
            <el-input size="small" v-model=queryForm.searchKey></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="本位码:" prop="standardCode">
            <el-input size="small" v-model=queryForm.standardCode></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="药品编码:" label-width="120px" prop="number">
            <el-input size="small" v-model=queryForm.number></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="厂家/产地:" label-width="120px" prop="manufacturer">
            <el-input size="small" v-model=queryForm.manufacturer></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="批准文号:" label-width="120px" prop="approvalNumber">
            <el-input size="small" v-model=queryForm.approvalNumber></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格:" prop="spec">
            <el-input size="small" v-model=queryForm.spec></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="剂型:" prop="dosageType">
            <template>
              <el-select size="small" v-model="queryForm.dosageType" placeholder="请选择" style="width: 92%;">
                <el-option
                  v-for="item in dosageForm"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="所属类别:" label-width="120px" prop="category">
            <template>
              <el-input size="small" v-model=queryForm.category :disabled="true"></el-input>
            </template>
            <!--            <el-cascader-->
            <!--              clearable-->
            <!--              size="small"-->
            <!--              :show-all-levels="false"-->
            <!--              v-model="queryForm.typeVlaue"-->
            <!--              :options="typeOptions"-->
            <!--              @change="handleChange"-->
            <!--              :props="{label: 'name',value: 'id',expandTrigger: 'hover'}"></el-cascader>-->
          </el-form-item>
          <el-button size="small" @click="treeType" style="margin-top: 2px;">+</el-button>
        </el-col>

          <el-form-item label="是否启用" >
            <el-switch v-model="value1"></el-switch>
          </el-form-item>
        <el-col :span="24">
          <el-form-item label="药品图片:" >
            <el-upload
              class="upload-demo"
              ref="upload"
              accept=".jpg, .png"
              :action="upload.url"
              :file-list="fileList"
              :headers="upload.headers"
              :show-file-list="false"
              :on-exceed="handleExceed"
              :on-change="handleChange"
              :on-success="handleAvatarSuccess"
              list-type="picture-card">
              <img v-if="drugImg" :src="drugImg" class="avatar">
              <i v-else class="el-icon-plus"></i>
              <!-- <el-button size="small" type="primary" :disabled="hideUploadEdit">点击上传</el-button> -->
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="infoRow">
        <el-col :span="24">
          <div class="grid-content bg-purple-light">
            <el-row>
              <el-col>
                <div class="grid-content bg-red">
                  <el-tabs>
                    <el-tab-pane label="计费信息">
                      <el-row>
                        <el-form-item label="零售单位:" label-width="120px" size="mini" prop="retailUnit">
                          <el-select v-model="queryForm.retailUnit" placeholder="请选择" @change="retailChange">
                            <el-option
                              v-for="item in retailForm"
                              :key="item.dictValue"
                              :label="item.dictLabel"
                              :value="item.dictValue">
                            </el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item label="国家零售价:" label-width="100px" size="mini" prop="nationalPrice">
                          <template>
                            <el-input type='number' v-model=queryForm.nationalPrice style="width:100%"></el-input>
                          </template>
                        </el-form-item>
                        <el-form-item label="零售价:" label-width="100px" size="mini" prop="retailPrice">
                          <template>
                            <el-input type='number' v-model=queryForm.retailPrice style="width:100%"></el-input>
                          </template>
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item label="最小单位:" label-width="120px" size="mini" prop="smallestUnit">
                          <el-select v-model="queryForm.smallestUnit" placeholder="请选择" @change="smallestChange">
                            <el-option
                              v-for="item in minimumUnit"
                              :key="item.dictValue"
                              :label="item.dictLabel"
                              :value="item.dictValue">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item class="itemBox" :label="'1' + zeroMedicLabel + '='"
                                      label-width="100px" size="mini"
                                      style="width:40%;text-align:center" prop="smallestUnitNumber">
                          <div>
                            <template>
                              <el-input class="box" type='number' v-model=queryForm.smallestUnitNumber style="width:100%"/>
                              <span class="boxSpan">{{smallestMedicLabel}}</span>
                            </template>
                          </div>
                          <div class="unit">
                            <p class="zeroUnit"><span class="word">零售单位</span><span class="lineSpan"></span></p>
                            <p class="smallUnit"><span class="lineSpan"></span><span class="word">最小单位</span></p>
                          </div>
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <template>
                          <el-col >
                            <el-form-item label="是否需要拆卸" >
                              <el-switch v-model="value2"></el-switch>
                            </el-form-item>
                          </el-col>
                        </template>
                      </el-row>
                      <el-row style="margin-top:10px">
                        <template>
                          <el-form-item label="拆零单位:" label-width="120px" size="mini" v-if="value2"
                                        prop="dismantleUnit">
                            <template>
                              <el-select v-model="queryForm.dismantleUnit" placeholder="请选择" @change="dismantleChange">
                                <el-option
                                  v-for="item in dismantleUnit"
                                  :key="item.dictValue"
                                  :label="item.dictLabel"
                                  :value="item.dictValue">
                                </el-option>
                              </el-select>
                            </template>
                          </el-form-item>
                        </template>
                        <el-form-item class="itemBox" :label="'1' + zeroMedicLabel + '='"
                                      label-width="100px" size="mini" v-if="value2"
                                      prop="dismantleSmallestUnitNumber" style="width: 40.5%;text-align:center">
                          <template>
                            <el-input type='number' class="box" v-model=queryForm.dismantleSmallestUnitNumber
                                      style="width:100%"/>
                            <span class="boxSpan">{{dismantleMedicLabel}}</span>
                          </template>
                          <div class="medication">
                            <p class="zeroMedic"><span class="line"></span><span class="vertical"></span><span
                              class="wordI">零售单位</span></p>
                            <p class="smallMedic"><span class="line"></span><span class="vertical"></span><span
                              class="wordI">拆零单位</span></p>
                          </div>

                        </el-form-item>
                        <el-form-item label="零拆售价:" label-width="100px" size="mini" v-if="value2"
                                      prop="dismantlePrice">
                          <template>
                            <el-input type='number' v-model=queryForm.dismantlePrice style="width:100%" v-if="value2"></el-input>
                          </template>
                        </el-form-item>
                      </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="用药信息">
                      <el-form-item label="剂量单位:" label-width="120px" size="mini" prop="dosageUnit">
                        <template>
                          <el-select v-model="queryForm.dosageUnit" placeholder="请选择" @change="dosageChange">
                            <el-option
                              v-for="item in doseUnit"
                              :key="item.dictValue"
                              :label="item.dictLabel"
                              :value="item.dictValue">
                            </el-option>
                          </el-select>
                        </template>
                      </el-form-item>
                      <el-form-item label="成人单次用量:" label-width="120px" size="mini" prop="adultDosage">
                        <template>
                          <el-input type='number' v-model=queryForm.adultDosage style="width:100%"></el-input>
                        </template>
                      </el-form-item>
                      <el-form-item label="儿童单次用量:" label-width="120px" size="mini" prop="childDosage">
                        <template>
                          <el-input type='number' v-model=queryForm.childDosage style="width:100%"></el-input>
                        </template>
                      </el-form-item>
                      <el-row>
                        <el-form-item label="默认用法:" label-width="120px" size="mini" prop="defaultUsage">
                          <template>
                            <el-select v-model="queryForm.defaultUsage" placeholder="请选择">
                              <el-option
                                v-for="item in defaultUsage"
                                :key="item.dictValue"
                                :label="item.dictLabel"
                                :value="item.dictValue">
                              </el-option>
                            </el-select>
                          </template>
                        </el-form-item>
                        <el-form-item label="默认用药天数:" label-width="120px" size="mini" prop="medicationDays">
                          <template>
                            <el-input type='number' v-model=queryForm.medicationDays style="width:100%"></el-input>
                          </template>
                        </el-form-item>
                        <el-form-item label="默认频次:" label-width="120px" size="mini" prop="frequency">
                          <template>
                            <el-select v-model="queryForm.frequency" placeholder="请选择" style="width: 92%;">
                              <el-option
                                v-for="item in defaultFrequency"
                                :key="item.dictValue"
                                :label="item.dictLabel"
                                :value="item.dictValue">
                              </el-option>
                            </el-select>
                          </template>
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item label="特殊用法:" label-width="120px" size="mini" prop="specialUsage">
                          <template>
                            <el-select v-model="queryForm.specialUsage" placeholder="请选择">
                              <el-option
                                v-for="item in specialUsage"
                                :key="item.dictValue"
                                :label="item.dictLabel"
                                :value="item.dictValue">
                              </el-option>
                            </el-select>
                          </template>
                        </el-form-item>
                        <el-form-item class="medicBox" :label="'1' + zeroMedicLabel + '='"
                                      label-width="100px" size="mini" style="width:30%;text-align:center"
                                      prop="dosageUnitNumber">
                          <template>
                            <el-input type='number' class="box" v-model=queryForm.dosageUnitNumber style="width:100%"></el-input>
                            <span class="boxSpan">{{dosageMedicLabel}}</span>
                          </template>
                          <div class="medication">
                            <div class="zeroTotal">零售总量=（单次用量*频次*天数）/ 转换系数</div>
                            <p class="zeroMedic"><span class="line"></span><span class="vertical"></span><span
                              class="wordI">零售单位</span></p>
                            <p class="smallMedic"><span class="line"></span><span class="vertical"></span><span
                              class="wordI">剂量单位</span></p>
                          </div>
                        </el-form-item>
                      </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="其他信息">
                      <el-form-item label="基药分类:" label-width="120px" size="mini" prop="baseType">
                        <template>
                          <el-select v-model="queryForm.baseType" placeholder="请选择">
                            <el-option
                              v-for="item in asicDrugs"
                              :key="item.dictValue"
                              :label="item.dictLabel"
                              :value="item.dictValue">
                            </el-option>
                          </el-select>
                        </template>
                      </el-form-item>
                      <el-form-item label="管控级别:" label-width="120px" size="mini" prop="levelControl">
                        <template>
                          <el-select v-model="queryForm.levelControl" placeholder="请选择">
                            <el-option
                              v-for="item in controlLevel"
                              :key="item.dictValue"
                              :label="item.dictLabel"
                              :value="item.dictValue">
                            </el-option>
                          </el-select>
                        </template>
                      </el-form-item>
                      <el-row>
                        <el-form-item label="特殊分类:" label-width="120px" size="mini" prop="specialType">
                          <template>
                            <el-select v-model="queryForm.specialType" placeholder="请选择">
                              <el-option
                                v-for="item in specialClassification"
                                :key="item.dictValue"
                                :label="item.dictLabel"
                                :value="item.dictValue">
                              </el-option>
                            </el-select>
                          </template>
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item label="是否为医保:" label-width="120px" size="mini" prop="isMedicare">
                          <template>
                            <el-select v-model="queryForm.isMedicare" placeholder="请选择">
                              <el-option
                                v-for="item in medicalInsurance"
                                :key="item.dictValue"
                                :label="item.dictLabel"
                                :value="item.dictValue">
                              </el-option>
                            </el-select>
                          </template>
                        </el-form-item>
                        <el-form-item label="医保类型:" label-width="120px" size="mini" prop="medicareType">
                          <template>
                            <el-select v-model="queryForm.medicareType" placeholder="请选择">
                              <el-option
                                v-for="item in typesOfMedical"
                                :key="item.dictValue"
                                :label="item.dictLabel"
                                :value="item.dictValue">
                              </el-option>
                            </el-select>
                          </template>
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item label="库存上限/下限:" label-width="120px" size="mini" prop="stockUpper">
                          <div style="width:150px">
                            <template>
                              <el-input type='number' v-model=queryForm.stockUpper style="width:45%;margin-right: 2%;"></el-input>
                              <span style="width: 10%" class="d2-text-center">/</span>
                              <el-input type='number' v-model=queryForm.stockLower style="width:45%;margin-left: 2%;"></el-input>
                              <span class="boxSpan">{{zeroMedicLabel}}</span>
                            </template>
                          </div>
                          <div class="other">
                            <p class="upDown"><span class="line"></span><span class="vertical"></span><span
                              class="wordI">零售单位</span></p>
                          </div>
                        </el-form-item>
                      </el-row>
                    </el-tab-pane>

                  </el-tabs>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-red"></div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-button class="mrt-20" size="small" type="primary" @click="saveDrugType(queryForm)">保 存</el-button>
    </el-form>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <el-tree
        :data="tableData"
        highlight-current:true
        check-on-click-node:true
        show-checkbox:true
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        @node-click="handleXmxz"
        :props="defaultProps">
        <span slot-scope="{ data }" :title="data.name">
          <span v-if="data.children != null">
            <i class="el-icon-folder"></i>
            {{data.name }}
          </span>
         <span v-else>
            <i class="el-icon-document"></i>
            {{data.name }}
          </span>
        </span>
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {MessageBox} from "element-ui";
  import {GetDrugTypeList,InsertDrugList} from "@/api/drug/drug";
  import { getToken } from '@/utils/auth'
  export default {

    data() {

      const stockValid = (rule, value, callback) => {
        if (!this.queryForm.stockUpper || !this.queryForm.stockLower) {
          return callback(new Error("必填项"));
        } else {
          callback();
        }
      };

      //自定义下拉框校验函数
      const isSelect = (rule, value, callback) => {
        if (value === '') { //如果值是 ''，提示用户选择正确的选项
          return callback(new Error("必填项"));
        } else {
          callback();
        }
      };
      var checkName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("必填项"));
        }

      };
      return {
        // 上传参数
        upload: {
          // 是否禁用上传
          // isUploading: false,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/common/upload",
        },
        fileList:[],
        drugImg:'',
        value2: false,
        value1: true,
        typeValue: [],
        typeOptions: [],
        names: '',
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        dialogVisible: false,
        queryForm: {
          category: '',
          dismantleUnit: '',
          typeVlaue: '',
          specialUsage: '',
          frequency: '',
          defaultUsage: '',
          dosageUnit: '',
          retailUnit: '',
          standardCode: '',
          searchKey: '',
          drugType: '',
          dosageType: '',
          manufacturer: '',
          approvalNumber: '',
          retailPrice: '',
          smallestUnit: '',
          adultDosage: '',
          childDosage: '',
          medicationDays: '',
          baseType: '',
          levelControl: '',
          specialType: '',
          isMedicare: '',
          medicareType: '',
          stockUpper: '',
          stockLower: '',
          typeId: '',
          status: 'Disable',
          dismantlePrice: '',
          smallestUnitNumber: '',
          dismantleSmallestUnitNumber: '',
          drugImg:''
        },
        valueMedicalInsurance: '',
        valueTypesOfMedical: '',
        valueSpecialClassification: '',
        valueControlLevel: '',
        valueSpecialUsage: '',
        valueDefaultUsage: '',
        valueAsicDrugs: '',
        valueDefaultFrequency: '',
        valueMinimumUnit: '',
        radio: '1',
        medNeed: true,
        options: [],
        value: '',
        values: '',
        valueDoseUnit: '',
        zeroMedicLabel: '盒',
        smallestMedicLabel: '片',
        dosageMedicLabel: 'mg',
        dismantleMedicLabel: '片',
        dosageForm: [],
        retailForm: [],
        dismantleUnit: [],
        doseUnit: [],
        valueRetailUnit: '',
        minimumUnit: [],
        defaultUsage: [],
        defaultFrequency: [],
        specialUsage: [],
        asicDrugs: [],
        controlLevel: [],
        specialClassification: [],
        medicalInsurance: [],
        typesOfMedical: [],
        tableData: [],
        rules: {
          name: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 20, message: '最多20个字符', trigger: 'blur'},
          ],
          drugType: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          dosageType: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          searchKey: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 20, message: '最多20个字符', trigger: 'blur'}
          ],
          standardCode: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 20, message: '最多20个字符', trigger: 'blur'}
          ],
          number: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 20, message: '最多20个字符', trigger: 'blur'}
          ],
          manufacturer: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 20, message: '最多20个字符', trigger: 'blur'}
          ],
          dosageUnitNumber: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 11, message: '最多11个字符', trigger: 'blur'}
          ],
          approvalNumber: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 20, message: '最多20个字符', trigger: 'blur'}
          ],
          spec: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 20, message: '最多20个字符', trigger: 'blur'}
          ],
          smallestUnitNumber: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 11, message: '最多11个字符', trigger: 'blur'}
          ],
          dismantleSmallestUnitNumber: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 11, message: '最多11个字符', trigger: 'blur'}
          ],
          nationalPrice: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          category: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          names: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          retailPrice: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          dismantlePrice: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          adultDosage: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          childDosage: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          medicationDays: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          stockUpper: [
            {required: true, message: '必填项', trigger: 'blur', validator: stockValid},
          ],
          stockLower: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          typeVlaue: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          retailUnit: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          smallestUnit: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          dismantleUnit: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          dosageUnit: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          frequency: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          specialUsage: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          defaultUsage: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          baseType: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          levelControl: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          specialType: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          isMedicare: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          medicareType: [
            {required: true, trigger: "change", validator: isSelect}
          ],
        }
      };
    },
    mounted() {
      this.getDrugTypeList();
      this.getDictByType();
    },
    computed: {
      setUnitLabel(text) {
        return ((text) => {
            for (let i = 0; i < this.retailForm.length; i++) {
              if (this.retailForm[i].dictValue === text) {
                return this.retailForm[i].dictLabel;
              } else {
                return text;
              }
            }
        })
      },
      setDoseUnitLabel(text) {
        return ((text) => {
          for (let i = 0; i < this.doseUnit.length; i++) {
            if (this.doseUnit[i].dictValue === text) {
              return this.doseUnit[i].dictLabel;
            } else {
              return text;
            }
          }
        })
      }
    },
    methods: {
      handleExceed(files, fileList) {

      },
      handleChange(file, fileList) {
        // 当多余一个的时候替换文件
        if (fileList.length > 1) {
          fileList.splice(0, 1);
        }
      },
      handleAvatarSuccess(res, file) {
        this.drugImg = res.url
        this.queryForm.drugImg = res.fileName
      },

      getDictByType() {
        this.getDicts("drug_classify").then(response => {
          this.options = response.data;
        });
        this.getDicts("dosage").then(response => {
          this.dosageForm = response.data;
        });
        this.getDicts("retail_unit").then(response => {
          this.retailForm = response.data;
        });
        this.getDicts("smallest_unit").then(response => {
          this.minimumUnit = response.data;
        });
        this.getDicts("dismantle_unit").then(response => {
          this.dismantleUnit = response.data;
        });
        this.getDicts("dosage_unit").then(response => {
          this.doseUnit = response.data;
        });
        this.getDicts("default_usage").then(response => {
          this.defaultUsage = response.data;
        });
        this.getDicts("default_frequency").then(response => {
          this.defaultFrequency = response.data;
        });
        this.getDicts("special_usage").then(response => {
          this.specialUsage = response.data;
        });
        this.getDicts("base_type").then(response => {
          this.asicDrugs = response.data;
        });
        this.getDicts("level_control").then(response => {
          this.controlLevel = response.data;
        });
        this.getDicts("special_type").then(response => {
          this.specialClassification = response.data;
        });
        this.getDicts("is_medicare").then(response => {
          this.medicalInsurance = response.data;
        });
        this.getDicts("medicare_type").then(response => {
          this.typesOfMedical = response.data;
        });
      },
      handleChange(value) {
        this.queryForm.typeId = value[value.length - 1];
      },
      retailChange(value) {
        for (let i = 0; i < this.retailForm.length; i++) {
          let current = this.retailForm[i];
          if(value === current.dictValue) {
            this.zeroMedicLabel = current.dictLabel;
          }
        }
      },
      smallestChange(value) {
        for (let i = 0; i < this.minimumUnit.length; i++) {
          let current = this.minimumUnit[i];
          if(value === current.dictValue) {
            this.smallestMedicLabel = current.dictLabel;
          }
        }
      },
      dismantleChange(value) {
        for (let i = 0; i < this.dismantleUnit.length; i++) {
          let current = this.dismantleUnit[i];
          if(value === current.dictValue) {
            this.dismantleMedicLabel = current.dictLabel;
          }
        }
      },
      dosageChange(value) {
        for (let i = 0; i < this.doseUnit.length; i++) {
          let current = this.doseUnit[i];
          if(value === current.dictValue) {
            this.dosageMedicLabel = current.dictLabel;
          }
        }
      },
      getDrugTypeList() {
        GetDrugTypeList(this.params).then(res => {
          this.tableData = res.data;
          this.typeOptions = res.data
        });
      },
      saveDrugType(queryForm) {
        this.$refs.form.validate(valid => {
          if (valid) {
            if (this.value1 == true) {
              this.queryForm.status = 'Enable'
            } else {
              this.queryForm.status = 'Disable'
            }
            console.log(queryForm)
            console.log(this.queryForm)
            InsertDrugList(queryForm).then(res => {
              if (res.code === 0) {
                MessageBox.alert("您的操作已提交成功!", "提示", {
                  type: "success",
                  confirmButtonText: "确定",
                });
              }
            })
          }
        });
      },
      treeType() {
        this.dialogVisible = true;

      },
      handleXmxz(obj, node, data) {
        if (obj.children == null) {
          this.queryForm.typeId = obj.id;
          console.log(this.queryForm.typeId)
        }
        this.queryForm.category = obj.name
      },
    }
  }
</script>

<style lang="scss" scoped>
.avatar {
    display: block;
    margin: 0 auto;
    width: 140px;
    height: 140px;
  }
  .hide{
    display: none;
  }

  .mrt-20 {
    margin-top: 20px
  }

  .addPage {
    i {
      font-size: 36upx;
    }

    span {
      font-size: 28upx;
    }

    .box {
      position: relative;
    }

    .boxSpan {
      color: #606266;
      position: absolute;
      right: -20px;
    }
  }

  .el-form-item {
    margin-bottom: 10px;
  }

  .itemBox {
    .unit {
      position: absolute;
      width: 120px;

      .zeroUnit {
        position: relative;
        top: -42px;
        left: -170px;
      }

      .smallUnit {
        position: relative;
        top: -84px;
        left: 94px;
      }

      .lineSpan {
        display: inline-block;
        width: 50px;
        height: 1px;
        background: rgba(255, 153, 153, 1);
        vertical-align: middle;
      }

    }
  }

  .medication {
    position: absolute;
    width: 120px;

    p {
      text-align: center;
    }

    .zeroMedic {
      position: relative;
      top: -18px;
      left: -86px;
    }

    .smallMedic {
      position: relative;
      top: -106px;
      left: 19px;
    }
  }

  .other {
    position: absolute;
    width: 120px;

    .upDown {
      text-align: center;
      position: relative;
      top: -16px;
      left: 103px;
    }
  }

  .line {
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 1px;
    background: rgba(255, 153, 153, 1);
  }

  .vertical {
    display: block;
    margin: 0 auto;
    width: 1px;
    height: 45px;
    background: rgba(255, 153, 153, 1);
  }

  .word {
    display: inline-block;
    text-align: center;
    width: 70px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    background: rgba(255, 153, 153, 1);
  }

  .wordI {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    width: 70px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    background: rgba(255, 153, 153, 1);
  }

  .zeroTotal {
    float: left;
    text-align: center;
    width: 310px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background: rgba(255, 153, 153, 1);
    position: relative;
    top: 30px;
    left: -450px;
  }

  .el-form-item[data-v-60b34fc0] {
    margin-bottom: 15px;;
  }
</style>
<style>
  .box input {
    width: 65px;
  }

  .infoRow .el-tabs__content {
    padding-bottom: 100px;
  }
</style>
